<template>
  <div class="page-wenzhang">
    <!-- 文章管理页面 -->
     <el-table
      :data="tableData"
      style="width: 100%">

      <el-table-column
        prop="id"
        label="">
        <template slot-scope="obj">
          <div class="touimg">
            <span><img :src="obj.row.user.profile.avatar | formaimg" alt=""></span>
            <div>
              <span>{{obj.row.title}}</span>
              <p v-html="obj.row.updated_at"></p>
            </div>
          </div>
          <p v-html="obj.row.content"></p>

        </template>
      </el-table-column>

      <el-table-column
        prop="picture"
        label=""
        width="250">
        <template slot-scope="err">
          <img :src="err.row.picture | formatcture" alt="" class="pic"/>
        </template> 
      </el-table-column>

    </el-table>
  </div>
</template>
<style lang="scss">
.page-wenzhang{
  height: 100%;
  color: #000;
  background: #fff;
  padding: 20px;
  .tou{
    background: red;
  }
  .pic{
    width: 240px;
  }
  .touimg{
    display: flex;
    >span{
      display: block;
      height: 32px;
      width: 32px;
      border-radius: 50%;
      overflow: hidden;
      margin-right: 6px;
      img{
      width: 32px;
      vertical-align: middle;
      }
    }
    div{
      span{
        font-size: 18px;
      }
      p{
        color: rgba(0, 0, 0, 0.45);
        margin: 10px 0;
      }
    }
  }
}
</style>
<script>
import axios from 'axios'
export default {
  data (){
    return {
       tableData: []
    }
  },
  filters:{
    formatcture (value) {
      // console.log(value)
      return `http://10.20.154.115:3333${value}`
    },
    formaimg (value) {
      return `http://10.20.154.115:3333${value}`
    }
  },
  methods:{
    getQnqu (){
      let user=window.sessionStorage.getItem('user')
      user=JSON.parse(user)
      axios.get('http://10.20.154.115:3333/api/v1/posts',{
        headers:{
          Authorization:`Bearer ${user.jwt.token}`
        }
      }).then(response =>{
        let result=response.data
        this.tableData=result
        //console.log(result)
      }).catch(erro =>{
        console.log(erro)
        this.$message.error('网络异常，请稍候重试')
      })
    }
  },
  created () {
    this.getQnqu()
  }
}
</script>
